$(document).ready(function() {
    var img = $('.main img')
    var mainW = $('.main').width();
    var li = $('.point li')
    var len = img.length
    var last = 0;
    var next = 0;
    var speed = 2000;
    img.css('left', mainW)
    img.eq(0).css('left', 0)
    li.eq(0).css('background', 'red')

    function Next() {
        next++;
        if (next == len) {
            next = 0
        }
        img.eq(next).css('left', mainW)
        img.eq(last).animate({ 'left': -mainW })
        img.eq(next).animate({ 'left': 0 })
        li.eq(next).css('background', 'red')
        li.eq(last).css('background', '#ccc')
        last = next;
    }

    function Last() {
        next--;
        if (next == -1) {
            next = len - 1
        }
        img.eq(next).css('left', -mainW)
        img.eq(last).animate({ 'left': mainW })
        img.eq(next).animate({ 'left': 0 })
        li.eq(next).css('background', 'red')
        li.eq(last).css('background', '#ccc')
        last = next;
    }

    var timer = null;
    $('.main').hover(function() {
        clearInterval(timer)
    }, function() {
        timer = setInterval(Next, 2000)
    })

    $('.last').click(function() {
        clearInterval(timer)
        Last()
    })
    $('.next').click(function() {
        clearInterval(timer)
        Next();
    })

    li.click(function() {
        var index = $(this).index();
        clearInterval(timer)
        if (index == next) {
            return clearInterval(timer)
        } else if (index < next) {
            clearInterval(timer)
            img.eq(index).css('left', -mainW)
            img.eq(last).animate({ 'left': mainW }, )
            img.eq(index).animate({ 'left': 0 }, )
            li.eq(index).css('background', 'red')
            li.eq(last).css('background', '#ccc')
            last = index;
            next = index;
        } else if (index > next) {
            clearInterval(timer)
            img.eq(index).css('left', mainW)
            img.eq(last).animate({ 'left': -mainW }, )
            img.eq(index).animate({ 'left': 0 }, )
            li.eq(index).css('background', 'red')
            li.eq(last).css('background', '#ccc')
            last = index;
            next = index;
        }
    })
})